import React from 'react'
import { findDOMNode } from 'react-dom'
import style from './style.content'
import { connect } from 'react-redux'
import cx from 'classnames'
import util from '../../util'
import { bindActionCreators } from 'redux'
import { setStepGuide, updateGuide } from '../../actions/app.action'
import Guide from '../guide';

export default
@connect(null, dispatch => ({actions: bindActionCreators({ setStepGuide, updateGuide }, dispatch)}))
class Content extends React.Component {

  state = {
    el: null
  }

  componentDidMount() {
    this.setState({
      el: findDOMNode(this)
    })
  }

  scroll(cb) {
    this.onscroll = cb
    util.bind(this.el, 'scroll', cb)
  }

  unscroll() {
    util.unbind(this.el, 'scroll', this.onscroll)
  }

	render() {
		const { children, org, ...others } = this.props
    const {
      pathname = ''
    } = others.location || {};
    const [ name, sub_name, sub_sub_name ] = pathname.slice(1).split(/\//);
    const { userId, teamVO, orgId } = others.profile;
		return (
			<div className={cx({
        [style.root]: true,
        [style[name]]: name,
        [style[sub_name]]: sub_name,
        [style[sub_sub_name]]: sub_sub_name,
        [style['has-guide']]: org.isNaviOrg,
      })}>
				<div className={style.wrapper}>
					{
						React.Children.map(children, child => React.cloneElement(child, {
							...others,
              root: this,
						}))
					}
				</div>
        {
          org.isNaviOrg ? (
            <Guide
              router={this.props.router}
              freeze={this.props.freeze_guide}
              data={[
                {
                  name: '欢迎使用',
                },
                {
                  name: '浏览目标',
                  descr: ['在首页，你可以依次浏览你的目标（包括所负责的团队目标和个人目标），你所在团队的目标和公司目标。', '点击下一步，前往查看你团队的完整目标列表。'],
                },
                {
                  name: '创建周期',
                  descr: [
                    '设定目标前，需要根据团队情况，设定不同的目标周期。一般推荐以季度为周期。',
                    '目标周期的粒度需要公司上下协调商议决定。',
                  ],
                },
                {
                  name: '创建目标',
                  descr: ['通过团队讨论和一对一沟通，我们已经得到了一系列目标，现在把它们写上去吧！'],
                },
                {
                  name: '创建关键结果',
                  descr: [
                    '创建目标后，为了使目标可衡量，我们需要设定一系列的关键结果（一般不超过4个）。',
                    '#注意，不要把关键结果写成任务列表，这样就失去了设定目标的意义了哦。具体的任务建议可以写在任务管理工具里（例如jira），也可以写在批注中。',
                  ],
                },
                {
                  name: '撰写批注',
                  descr: [
                    '批注是沟通具体工作的有用方式。您可以在这里更新目标/关键结果的进展备忘，也可以罗列为达成目标/关键结果，准备采取的具体策略。',
                    '#与同事就目标进行沟通时，也可以写在批注里。',
                  ],
                },
                {
                  name: '更新目标',
                  descr: [
                    '回顾更新是否及时，是目标管理能否实施成功的关键。',
                    '点击下一步，试试编辑更新目标/关键结果。',
                  ],
                },
                {
                  name: '卡片视图',
                  descr: [
                    '完成一系列目标创建后，点击「相关目标」，进入卡片视图，就可以了解公司/团队的目标全貌了！',
                  ],
                }
              ].map((v, i) => {
                if (i > 0) {
                  return {
                    ...v,
                    handler: () => {
                      this.props.actions.updateGuide(i);
                      switch(i) {
                        case 1:
                          this.props.router.push('/');
                          break;
                        case 2:
                        case 3:  
                        case 4:  
                        case 5:  
                        case 6: 
                          this.props.router.push(`/okr?type=2&teamId=${(teamVO || {}).teamId}`);
                          break;
                        case 7:  
                          this.props.router.push(`/okr?type=1&teamId=${(org.teamVO || {}).teamId}`);
                          break;
                      }
                    }
                  };
                }
                return {
                  ...v,
                  handler: () => {
                    this.props.actions.updateGuide(0);
                  }
                };
              })}
            />
         ) : null
        }
			</div>
		)
	}
}
